<template>
	<view class="pick-text" @tap.stop="">
		<view class="main-tabbar">
			<!-- <view :class="['tabbar-item',pageTabbarAc == item.id?'ac':'']" v-for="(item,index) in pageTabbarList"
				@click="changePageTabbarAc({item,index})" :key="index">
				<view class="text">{{item.text}}</view>
			</view> -->
			<!-- <view :class="['tabbar-item']">
				<view class="text">{{pageTabbarList[pageTabbarAc].text}}</view>
			</view> -->
			<!-- <view :class="['tabbar-item']">
				<view class="text">{{pageTabbarList.find(item=>pageTabbarAc==item.id).text}}</view>
			</view> -->
			<view class="finish" v-if="pageTabbarAc == 0">
				<svg t="1706783657474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="200" height="200">
					<path d="M847.329 255.653l42.426 42.426-475.176 475.176-42.426-42.427z" fill="#FFF" p-id="4234"></path>
					<path d="M74 514.426L116.426 472l299.107 299.106-42.427 42.427z" fill="#FFF" p-id="4235"></path>
				</svg>
			</view>
		</view>
		<view class="page1" v-if="pageTabbarAc == 0 && 0">
			<view class="main-content">
				<view class="kuang" v-if="tabbarAc == 1">
					<input class="ipt" type="text" ref="kuangIptText" @input="changeValue" @blur="blurValue" @focus="fontStyleListInd == 3" />
				</view>
			</view>
		</view>
		<view class="page2" v-if="pageTabbarAc == 1 && 0">
			<view class="main-edit">
				<view class="btns">
					<view class="btn-item" @tap="del()">
						<image class="icon" :src="imgPath + 'createAvatar/del.svg'" mode=""></image>
						<view class="text">删除</view>
					</view>
					<view class="btn-item" @tap="changeZIndex(1)">
						<image class="icon" :src="imgPath + 'createAvatar/up.svg'" mode=""></image>
						<view class="text">层级上移</view>
					</view>
					<view class="btn-item" @tap="changeZIndex(-1)">
						<image class="icon" :src="imgPath + 'createAvatar/up.svg'" mode="" style="transform: rotate(180deg)"></image>
						<view class="text">层级下移</view>
					</view>
				</view>
			</view>
			<view class="textStyle">
				<view class="textStyle-item">
					<view class="label">字体</view>
					<view class="r-c picker-box">
						<picker class="picker" @change="changeFont" :value="fontListInd" :range="fontList" range-key="fontName">
							<view class="uni-input">{{ fontList[fontListInd] ? fontList[fontListInd].fontName : "" }}</view>
						</picker>
						<view class="arrow">
							<image :class="['icon']" :src="imgPath + '/createAvatar/arrow.svg'" mode=""></image>
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字号</view>
					<!-- <view class="r-c input-box">
						<input type="number" v-model="fontsize" @input="changeFontsize" />
					</view> -->
					<view class="r-c slider-box">
						<slider :value="fontsize" @changes="changeFontsize" @changing="changeFontsize" min="1" max="100" show-value />
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">对齐</view>
					<view class="r-c btns-box">
						<view :class="['btn-item', textAlignListAc == index ? 'ac' : '']" @tap="changeTextAlignListAc(item, index)" v-for="(item, index) in textAlignList" :key="index">
							{{ item.text }}
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字体颜色</view>
					<view class="r-c color-show" @click="open('fontColor')">
						<view class="box"></view>
						<view class="box" :style="{ background: 'rgba(' + fontColor_rgba.r + ',' + fontColor_rgba.g + ',' + fontColor_rgba.b + ',' + fontColor_rgba.a + ')' }"></view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字体填充</view>
					<view class="r-c color-show" @click="open('fontBgColor')">
						<view class="box"></view>
						<view class="box" :style="{ background: 'rgba(' + fontBgColor_rgba.r + ',' + fontBgColor_rgba.g + ',' + fontBgColor_rgba.b + ',' + fontBgColor_rgba.a + ')' }"></view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字体描边</view>
					<view class="r-c color-show" @click="open('fontLineColor')">
						<view class="box"></view>
						<view class="box" :style="{ background: 'rgba(' + fontLineColor_rgba.r + ',' + fontLineColor_rgba.g + ',' + fontLineColor_rgba.b + ',' + fontLineColor_rgba.a + ')' }"></view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">描边大小</view>
					<!-- <view class="r-c slider-box">
						<slider :value="fontLineSize" @change="changeFontLineSize" min="0" max="10" show-value />
					</view> -->
					<view class="r-c input-box">
						<input type="number" v-model="fontLineSize" @input="changeFontLineSize" />
					</view>
				</view>
			</view>
		</view>
		<view class="page3" v-if="pageTabbarAc == 1 || 1">
			<view class="main-content">
				<view class="kuang-box">
					<view class="ipt-box">
						<!-- <image class="icon" :src="imgPath+'createAvatar/search.svg'" mode="widthFix"></image> -->
						<input class="ipt kuangIptText" v-model="iptContent" :adjust-position="false" :focus="autoFocus" @input="changeValue" @focus="focusValue" @blur="blurValue" type="text" @tap.stop="tapIpt" ref="kuangIptText" placeholder="请输入文字" />
					</view>
				</view>
			</view>
			<view class="page3-tabbar">
				<view class="list">
					<view class="item" v-for="(item, index) in fontStyleList" :key="index">
						<image class="icon" :src="imgPath + 'index/' + item.icon + (index == fontStyleListInd ? '-ac' : '') + '.svg'" mode="widthFix" @tap="changeFontStyleListInd(item, index)"></image>
					</view>
				</view>
				<image class="finish" :src="imgPath + 'index/dui.svg'" mode="widthFix" @tap="confirm"></image>
			</view>
			<view class="page3-1" v-if="fontStyleListInd == 0">
				<view class="textStyle-item-1">
					<view class="label">字号</view>
					<view class="r-c slider-box">
						<slider activeColor="rgba(243, 173, 51, 1)" backgroundColor="rgba(204, 204, 204, 1)" block-color="rgba(0, 153, 127, 1)" block-size="16" :value="fontsize" @changes="changeFontsize" @changing="changeFontsize" min="1" max="100" show-value />
					</view>
				</view>
				<view class="textStyle-item-1">
					<view class="label">对齐</view>
					<view class="r-c slider-box">
						<view class="r-c btns-box">
							<view :class="['btn-item', textAlignListAc == index ? 'ac' : '']" :key="index" @tap="changeTextAlignListAc(item, index)" v-for="(item, index) in textAlignList">
								{{ item.text }}
							</view>
						</view>
					</view>
				</view>
				<view class="textStyle-item-2">
					<view class="label">字体</view>
					<view class="fontList">
						<view :class="['item', fontListInd == index ? 'ac' : '']" v-for="(item, index) in fontList" :key="item.id" @tap="changeFont(index)">
							<view class="text" :style="{ fontFamily: item.fontName }">
								{{ item.fontName }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="page3-2" v-if="fontStyleListInd == 1">
				<view class="top">
					<view class="top-title">模板</view>
				</view>
				<view class="template-list">
					<view :class="['item', templateListInd == -1 ? 'ac' : '']" @tap="templateListInd = -1">
						<image class="none" :src="imgPath + 'index/none.svg'" mode="widthFix"></image>
					</view>
					<view :style="{ color: item.fontColor, '-webkit-text-stroke': '0.5px ' + item.fontLineColor }" :class="['item', templateListInd == index ? 'ac' : '']" v-for="(item, index) in templateList" :key="index" @tap="pickTemplate(item, index)">
						<view class="cont" :style="{ background: item.fontBgColor }">TEXT</view>
					</view>
				</view>
			</view>
			<view class="page3-3" v-if="fontStyleListInd == 2">
				<view class="top">
					<view class="top-title">样式</view>
					<view class="top-tabbar">
						<view :class="['item', fontStyleColorListInd == index ? 'ac' : '']" v-for="(item, index) in fontStyleColorList" :key="index" @tap="changeFontStyleColorListInd(item, index)">{{ item.text }}</view>
					</view>
				</view>
				<view class="color-list">
					<view class="item" v-for="(item, index) in textColorList" :key="index" :style="{ border: textColorInd == index ? '2px solid ' + item.color : '' }" @tap="changeTextColorInd(item, index)">
						<view class="item-color" :style="{ background: item.color }">
							<image class="dui" v-show="textColorInd == index" :src="imgPath + 'index/dui.svg'" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<t-color-picker ref="colorPicker" :color="fontColor" @confirm="fontColorConfirm"></t-color-picker>
	</view>
</template>

<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
import * as api from "@/api/createVideo.js";
import { textColorList, templateList } from "./data.js";
import { tools } from "../../../../utils/util";
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		promiseRes: {
			type: Object | Function,
			default() {
				return null;
			}
		},
		currInd: {
			type: Number,
			default: -1
		},
		scene2: {
			type: Array,
			default() {
				return [];
			}
		},
		pageItem: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			imgPath: tools.imgPath,
			value: "",
			fontListInd: 0,
			fontList: [],
			pageTabbarAc: 0,
			pageTabbarList: [],
			tabbarAc: 1,
			tabbarList: [],
			contentList: [],
			iptContent: "",
			textAlignListAc: null,
			textAlignList: [],
			fontsize: 20,
			fontColorField: "",
			fontColor: {
				r: 0,
				g: 0,
				b: 0,
				a: 1
			},
			fontColor_rgba: {
				r: 255,
				g: 0,
				b: 0,
				a: 1
			},
			fontBgColor_rgba: {
				r: 0,
				g: 255,
				b: 0,
				a: 1
			},
			fontLineColor_rgba: {
				r: 0,
				g: 0,
				b: 255,
				a: 1
			},
			fontLineSize: 1,
			autoFocus: false,
			fontStyleListInd: 3,
			fontStyleList: [
				{
					text: "字体",
					icon: "ftext"
				},
				{
					text: "模板",
					icon: "ftemplate"
				},
				{
					text: "样式",
					icon: "fstyle"
				},
				{
					text: "编辑",
					icon: "fedit"
				}
			],
			fontStyleColorListInd: 0,
			fontStyleColorList: [
				{
					text: "文本",
					field: "fontColor"
				},
				{
					text: "描边",
					field: "fontLineColor"
				},
				{
					text: "填充",
					field: "fontBgColor"
				}
			],
			textColorInd: 0,
			textColorList: [],
			templateListInd: -1,
			templateList
		};
	},
	async created() {
		this.initPageTabbarList();
		this.initTabbarList();
		this.initTextAlignList();
		this.initTextColorList();
		let next = await this.initGetData();
		if (this.promiseRes) {
			this.promiseRes(true);
		}
	},
	methods: {
		// 确定
		confirm() {
			this.$emit("close");
		},
		// 修改文字样式颜色
		changeTextColorInd(item, index) {
			this.textColorInd = index;
			let color = this.textColorList[this.textColorInd].color;
			let str = color.toLocaleLowerCase().replace(/(rgba)|(rgb)/, "");
			let arr = str.slice(1, -1).split(",");
			this.fontColorField = this.fontStyleColorList[this.fontStyleColorListInd].field;
			this.fontColorConfirm({
				rgba: {
					r: arr[0],
					g: arr[1],
					b: arr[2],
					a: arr[3]
				}
			});
		},
		// 修改文字样式颜色TabbarAc
		changeFontStyleColorListInd(item, index) {
			this.fontStyleColorListInd = index;
			let colorObj = this[`${this.fontStyleColorList[index].field}_rgba`];
			this.textColorInd = this.textColorList.findIndex((e) => {
				return e.color == `rgba(${+colorObj.r}, ${+colorObj.g}, ${+colorObj.b}, ${+colorObj.a})`;
			});
		},
		// 修改page3tabbar
		changeFontStyleListInd(item, index) {
			if (item.text == "编辑") {
				// this.autoFocus = true;
				// this.$emit('changeFont', {
				// 	currInd: this.currInd,
				// 	type: 'changeFontContent'
				// });
				// return;
			} else {
				if (this.fontStyleListInd == 3) {
					this.$emit("changeMyDH", 42, 15);
				}
				this.autoFocus = false;
			}
			this.fontStyleListInd = index;
		},
		// 选择字体模板
		pickTemplate(item, index) {
			this.templateListInd = index;
			let obj = this.templateList[this.templateListInd];
			for (let key in obj) {
				let color = obj[key];
				let str = color.toLocaleLowerCase().replace(/(rgba)|(rgb)/, "");
				let arr = str.slice(1, -1).split(",");
				this.fontColorField = key;
				this.fontColorConfirm({
					rgba: {
						r: arr[0],
						g: arr[1],
						b: arr[2],
						a: arr[3]
					}
				});
			}
		},
		//修改字体描边大小
		changeFontLineSize(event) {
			this.$emit("changeFont", {
				currInd: this.currInd,
				item: event.detail.value,
				type: "changeFontLineSize"
			});
		},
		//打开字体颜色选择器
		open(field) {
			this.fontColor = JSON.parse(JSON.stringify(this[`${field}_rgba`]));
			// console.log(this.fontColor);
			this.fontColorField = field;
			this.$refs.colorPicker.open();
		},
		//选择字体颜色
		fontColorConfirm(e) {
			this[`${this.fontColorField}_rgba`] = e.rgba;
			this.$emit("changeFont", {
				currInd: this.currInd,
				item: {
					field: this.fontColorField,
					val: e.rgba
				},
				type: "changeFontColor"
			});
		},
		//选择字体
		async changeFont(event) {
			this.fontListInd = event?.detail?.value || event;
			let fontobj = this.fontList[this.fontListInd];
			// console.log(fontobj);
			// await tools.loadFont_wx(fontobj.fontName, fontobj.fontUrl);
			this.$emit("changeFont", {
				currInd: this.currInd,
				item: fontobj,
				type: "changeFont"
			});
		},
		// 修改字体大小
		changeFontsize(event) {
			this.$emit("changeFont", {
				currInd: this.currInd,
				item: event.detail.value,
				type: "changeFontsize"
			});
			this.textAlignListAc = null;
		},
		//文字内容失焦事件
		blurValue(event) {
			this.$emit("blurValue", event.detail.value);
			// this.iptContent = "";
		},
		//文字内容聚焦事件
		focusValue(event) {
			this.$emit("focusValue", event.detail.value);
			this.fontStyleListInd = 3;
		},
		// 点击输入框
		tapIpt(event) {
			this.$emit("tapIpt");
		},
		//文字内容修改
		changeValue(event) {
			this.value = event.detail.value;
			this.$emit("changeValue", event.detail.value);
		},
		//修改textAlignListAc
		changeTextAlignListAc(item, index) {
			this.textAlignListAc = index;
			this.$emit("changeFont", {
				currInd: this.currInd,
				item: this.textAlignListAc,
				type: "changeTextAlignListAc"
			});
		},
		// 获取后端数据
		async initGetData() {
			console.log("字体---获取后端数据");
			let list = [this.initFontList()];
			await Promise.all(list);
			// 下载所有渲染字体
			// this.fontList.map((fontobj) => {
			// 	tools.loadFont_wx(fontobj.fontName, fontobj.fontUrl);
			// });
			return true;
		},
		//textAlignList初始化
		initTextAlignList() {
			this.textAlignList = [
				{
					text: "左对齐",
					idx: "left"
				},
				{
					text: "中间对齐",
					idx: "center"
				},
				{
					text: "右对齐",
					idx: "right"
				}
			];
			this.textAlignListAc = 1;
		},
		// fontList初始化
		initFontList() {
			return api.getFont().then((res) => {
				if (!res.data) return;
				this.fontList = res.data;
			});
		},
		// 文字颜色初始化
		initTextColorList() {
			this.textColorList = textColorList;
			return;
			this.textColorList = textColorList.reduce((p, e, i, s) => {
				let tempArr = p.at(-1) || [];
				if (i % 9 == 0) {
					tempArr = [];
					p.push(tempArr);
				}
				tempArr.push(e);
				return p;
			}, []);
		},
		// 初始化tabbarList
		initTabbarList() {
			this.tabbarList = [
				{
					text: "文本输入",
					id: 1
				},
				{
					text: "样式",
					id: 2
				}
			];
		},
		//初始化pageTabbarList
		initPageTabbarList() {
			this.pageTabbarList = [
				{
					text: "文本输入",
					id: 0
				},
				{
					text: "样式",
					id: 1
				}
			];
		},
		//切换页面类型
		changePageTabbarAc({ item, index }) {
			if (this.pageTabbarAc != item.id) {
				this.pageTabbarAc = item.id;
			}
			if (this.fontStyleListInd == 3) {
				this.$emit("changeMyDH", 30, 0);
			} else {
				this.$emit("changeMyDH", 42);
			}
			return;
			if (this.pageTabbarAc == 0) {
				// this.$emit('changeMyDH', 32);
			} else {
				this.$emit("changeMyDH", 39);
			}
		},
		changeTabbarAc({
			//切换类型
			item,
			index
		}) {
			this.tabbarAc = item.id;
		},
		pickContentItem({
			//选择item
			item,
			index
		}) {
			console.log({
				item,
				index
			});
		},
		// 删除
		del() {
			this.$emit("removeEl", this.currInd);
		},
		// 修改层级
		changeZIndex(num) {
			if (this.currInd == null || this.currInd < 0) {
				return tools.easyToast("请先选择字体框!");
			} else {
				this.$emit("changeZIndex", this.currInd, num);
			}
		}
	},
	watch: {
		show(val) {
			if (!val) {
				this.iptContent = "";
			} else {
				if (this.pageItem.ac != 6) return;
				if (this.scene2[this.currInd]?.eleType == "texts") {
					this.iptContent = this.scene2[this.currInd].content;
					this.textAlignListAc = this.scene2[this.currInd].sand.alignAc;
				}
			}
		},
		["pageItem.ac"](val) {
			if (val != 6) {
				this.autoFocus = false;
				return;
			}
			let index = this.pageTabbarList.findIndex((e) => {
				return e.id == this.pageItem?.pageAc;
			});
			if (index == -1) return;
			if (this.pageItem?.pageAc == 1) {
				//样式数据初始化
				this.autoFocus = false;
				let sand = this.scene2[this.currInd].sand;
				this.fontsize = sand.fontsize;
				const colorFn = (obj, field) => (obj[`${field}Val`] ? obj[`${field}Val`] : tools.hexToRgb(obj[field]));
				this.fontColor_rgba = colorFn(sand, "primaryColour");
				this.fontBgColor_rgba = colorFn(sand, "bgStyle");
				this.fontLineColor_rgba = colorFn(sand, "strokeStyle");
				// console.log(this.fontColor_rgba);
				// console.log(this.fontBgColor_rgba);
				// console.log(this.fontLineColor_rgba);
				this.fontLineSize = sand.lineWidth;
				this.textAlignListAc = sand.alignAc;
				let fontListInd = this.fontList.findIndex((e) => e.fontFile == sand.fontname);
				this.fontListInd = fontListInd;
			} else {
				// this.autoFocus = true;
			}
			this.changePageTabbarAc({
				item: this.pageTabbarList[index],
				index
			});
			// this.changeFontStyleColorListInd({
			// 	item:this.fontStyleColorList.at(-1),
			// 	index:this.fontStyleColorList.length - 1
			// });
		}
	},
	components: {
		tColorPicker
	}
};
</script>

<style lang="scss">
.pick-text {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;

	.page1 {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.main-tabbar {
		position: relative;
		display: -webkit-box;
		overflow: auto;

		.tabbar-item {
			padding: 2vw;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;

			&.ac {
				.text {
					border-bottom: 2px solid rgba(243, 173, 51, 1);
				}
			}

			.text {
				padding-bottom: 2vw;
			}
		}

		.finish {
			position: absolute;
			right: 1vw;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 2vw;
			box-sizing: border-box;
			--icon-size: 5vw;

			.icon {
				width: var(--icon-size);
				height: var(--icon-size);
				display: block;
			}
		}
	}

	.main-content {
		flex: 1;
		overflow: hidden;
		display: flex;

		.kuang {
			width: 100%;
			box-sizing: border-box;
			padding: 3vw 0vw;

			.ipt {
				width: 100%;
				box-sizing: border-box;
				border: 1px solid #fff;
				padding: 2vw;
				height: auto;
			}
		}
	}

	.page2 {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.main-edit {
			.btns {
				display: flex;

				.btn-item {
					border: 1px solid #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					min-width: 20vw;
					margin-right: 2vw;
					border-radius: 2vw;
					padding: 1vw;

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
					}
				}
			}
		}

		.textStyle {
			margin-top: 10vw;
			flex: 1;
			overflow: auto;

			.textStyle-item {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 2vw 0vw;

				.label {
				}

				.r-c {
					margin-left: 3vw;
					flex: 1;

					&.picker-box {
						box-sizing: border-box;
						padding: 2vw;
						background: #506768;
						color: #fff;
						border: 1px solid transparent;
						border-radius: 2vw;
						position: relative;
						display: flex;
						align-items: center;

						.picker {
							flex: 1;
						}

						.arrow {
							position: absolute;
							right: 2vw;
							width: 3vw;
							height: 3vw;

							.icon {
								width: 100%;
								height: 100%;
								display: block;
							}
						}
					}

					&.input-box {
						box-sizing: border-box;
						padding: 2vw;
						background: #506768;
						color: #fff;
						border: 1px solid transparent;
						border-radius: 2vw;
					}

					&.btns-box {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.btn-item {
							padding: 2vw;
							background: #506768;
							color: #fff;
							border: 1px solid transparent;
							border-radius: 1vw;

							&.ac {
								opacity: 1;
								border-radius: 4px;
								background: rgba(0, 153, 127, 0.2);
								border: 1px solid #00997f;
							}
						}
					}

					&.color-show {
						flex: none;
						width: 30vw;
						height: 10vw;
						box-sizing: border-box;
						padding: 2vw;
						border: 1px solid transparent;
						border-radius: 2vw;
						position: relative;
						overflow: hidden;

						.box {
							position: absolute;
							left: 0vw;
							top: 0vw;
							width: 100%;
							height: 100%;
							background: rgba(80, 103, 104, 0.2);
						}
					}

					&.slider-box {
					}
				}
			}
		}
	}

	.page3 {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		flex: 1;

		.main-content {
			flex: none;
			overflow: initial;

			.kuang {
				padding: 0vw;
				padding-bottom: 2vw;
			}

			.kuang-box {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.ipt-box {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 2.5vw;
					background: rgba(255, 255, 255, 0.08);
					border: 1px solid rgba(0, 153, 127, 1);
					margin: 0vw;
					margin-bottom: 2vw;
					padding: 3vw 1.5vw;

					.icon {
						width: 6vw;
					}

					.ipt {
						margin-left: 2vw;
						flex: 1;
					}
				}
			}
		}

		.page3-tabbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			--icon-size: 5vw;
			margin-bottom: 6vw;

			.list {
				display: flex;
				align-items: center;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-right: 12vw;

					.icon {
						width: var(--icon-size);
					}
				}
			}

			.finish {
				width: var(--icon-size);
			}
		}

		.page3-1 {
			overflow: auto;

			.textStyle-item-1 {
				width: 100%;
				display: flex;
				align-items: center;

				.r-c {
					margin-left: 3vw;
					flex: 1;

					&.btns-box {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.btn-item {
							padding: 1vw 2vw;
							background: #506768;
							color: #fff;
							border: 1px solid transparent;
							border-radius: 1vw;

							&.ac {
								opacity: 1;
								border-radius: 4px;
								background: rgba(0, 153, 127, 0.2);
								border: 1px solid #00997f;
							}
						}
					}

					&.slider-box {
					}
				}
			}

			.textStyle-item-2 {
				.label {
					height: 10vw;
					display: flex;
					justify-content: start;
					align-items: center;
				}

				.fontList {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-auto-rows: 8vw;
					gap: 2vw;

					.item {
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(26, 36, 32, 1);
						border-radius: 2.5vw;

						&.ac {
							background: rgba(0, 153, 127, 0.2);
							border: 1px solid #00997f;
						}
					}
				}
			}
		}

		.page3-2 {
			overflow: auto;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 6vw;

				.top-title {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20.27px;
					color: rgba(255, 255, 255, 1);
					margin-right: 6vw;
				}
			}

			.template-list {
				display: grid;
				grid-template-rows: repeat(3, 1fr);
				grid-template-columns: repeat(5, 1fr);
				gap: 2vw;

				.item {
					width: 16vw;
					height: 16vw;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 2.5vw;
					background: rgba(26, 36, 32, 1);

					&.ac {
						box-sizing: border-box;
						border: 1px solid rgba(0, 153, 127, 1);
					}

					.cont {
						padding: 0vw 1vw;
						font-weight: bold;
						font-size: 40rpx;
					}

					.none {
						width: 33.3%;
					}
				}
			}
		}

		.page3-3 {
			overflow: auto;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 6vw;

				.top-title {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20.27px;
					color: rgba(255, 255, 255, 1);
					margin-right: 6vw;
				}

				.top-tabbar {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						// color: rgba(87, 97, 93, 1);
						color: #ffffff68;
						background: rgba(38, 51, 46, 1);
						margin-right: 6vw;
						padding: 0.6vw 2.5vw;
						border-radius: 100vw;
						box-sizing: border-box;

						&.ac {
							border: 1px solid rgba(0, 153, 127, 1);
							color: rgba(0, 153, 127, 1);
							background: rgba(0, 153, 127, 0.1);
						}
					}
				}
			}

			.color-list {
				--item-size: 8vw;
				display: grid;
				grid-template-rows: repeat(5, 1fr);
				grid-template-columns: repeat(9, 1fr);
				gap: calc(10vw - var(--item-size));

				.item {
					width: var(--item-size);
					height: var(--item-size);
					box-sizing: border-box;
					background: transparent;
					border-radius: 50%;
					border: none;
					display: flex;
					justify-content: center;
					align-items: center;

					.item-color {
						width: 76%;
						height: 76%;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.dui {
							width: 79%;
							height: 79%;
							filter: brightness(86%);
						}
					}
				}
			}
		}
	}
}
</style>
